<!DOCTYPE html>
<html>

	<head lang="en">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="false" name="twcClient" id="twcClient">
		<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
		<meta content="no-cache" http-equiv="pragma">
		<meta content="0" http-equiv="expires">
		<!--允许全屏模式-->
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<!--指定sari的样式-->
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta content="telephone=no" name="format-detection" />
		<title>扫一扫</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />

		<style>
			.mui-bar-nav {
				top: 0;
				-webkit-box-shadow: 0 1px 6px #ccc;
				box-shadow: 0 1px 6px #ccc;
			}
			
			.mui-bar {
				position: fixed;
				z-index: 999;
				right: 0;
				left: 0;
				height: 44px;
				padding-right: 10px;
				padding-left: 10px;
				border-bottom: 0;
				background-color: #f7f7f7;
				-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
				box-shadow: 0 0 1px rgba(0, 0, 0, .85);
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
			}
			
			.mui-pull-right {
				float: right;
				padding: 10px 0;
				font-size: 16px;
				color: #908D8E;
			}
			
			.mui-bar-footer {
				bottom: 0;
			}
			
			#bcid {
				width: 100%;
				height: 80%;
				position: absolute;
				top: 50px;
				z-index: 1;
			}
			
			.fbt {
				color: #0E76E1;
				width: 50%;
				background-color: #ffffff;
				float: left;
				line-height: 44px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">扫一扫</h1>
			<span class="mui-pull-right mui-icon-extra mui-icon-extra-lamp" id="turnTheLight">开灯</span>
		</header>

		<div>
			<div id="bcid">
				<!--盛放扫描控件的div-->
			</div>
		</div>

		<div class="mui-bar mui-bar-footer" style="padding: 0px;">
			<div class="fbt" onclick="scanPicture();">从相册选择二维码</div>
			<div class="fbt" onclick="scanClose();">取　 消</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/util.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init({
			beforeback: function() {　　 //获得父页面的webview
				var list = plus.webview.currentWebview().opener();　　 //触发父页面的自定义事件(refresh),从而进行刷新
				mui.fire(list, 'scanMsg');
				//返回true,继续页面关闭逻辑
				return true;
			}
		});
		scan = null; //扫描对象
		mui.plusReady(function() { //通过mui初始化扫描

			startRecognize(); //开始扫描
		});

		function startRecognize() { //开启扫描方法
			try {
				var filter;
				//自定义的扫描控件样式
				var styles = {
					frameColor: "#29E52C",
					scanbarColor: "#29E52C",
					background: ""
				}
				//扫描控件构造
				scan = new plus.barcode.Barcode('bcid', filter, styles);
				scan.onmarked = onmarked; ////扫描完毕后的回调
				scan.onerror = onerror; //扫描错误
				scan.start();
				var times = 0
				var timer = setInterval(function() {
					times++;
					if(times >= 60) {
						clearInterval(timer);
						mui.toast('扫描超时，请重新扫一扫', {
							duration: 'long',
							type: 'div'
						})
						scan.close();
						mui.back();
					}
				}, 1000)

			} catch(e) {
				alert("出现错误啦:\n" + e);
			}
		};

		//打开关闭闪光灯处理
		var flag = false;
		document.getElementById("turnTheLight").addEventListener('tap', function() {
			if(flag == false) {
				scan.setFlash(true);
				flag = true;
			} else {
				scan.setFlash(false);
				flag = false;
			}
		});
		// 从相册中选择二维码图片
		function scanPicture() { //可以直接识别二维码图片
			plus.gallery.pick(function(path) {
				plus.barcode.scan(path, onmarked, function(error) {
					plus.nativeUI.alert("无法识别此图片");
				});
			}, function(err) {
				plus.nativeUI.alert("Failed: " + err.message);
			});
		}
		//这个是扫描二维码的回调函数，type是扫描二维码回调的类型
		function onmarked(type, result) {
			var text = '';
			switch(type) { //QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果
				case plus.barcode.QR:
					text = 'QR: ';
					break;
				case plus.barcode.EAN13:
					text = 'EAN13: ';
					break;
				case plus.barcode.EAN8:
					text = 'EAN8: ';
					break;
			}
			scan.close();
			result = result.slice(result.lastIndexOf("/") + 1);
			console.log(result);
			localStorage.setItem("qrcode", result);
			mui.back();

		};
		//关闭控件
		function scanClose() {
			scan.close();
			mui.back();
			//			var activePage = plus.webview.currentWebview()
			//			var targetPage = plus.webview.getWebviewById("html/device.html")
			//			util.changeSubpage(targetPage, activePage, 'pop-in');
			//			util.toggleNview(1)
			//			var index = plus.webview.getLaunchWebview();
			//						plus.webview.show(index);
			//			plus.webview.currentWebview().hide()

		}
	</script>

</html>